import React, { Component, createRef } from 'react'

class Header extends Component {
  state = {
    msg: '这个是头部'
  }
  render(){
    return (<>
    <h1>
      {this.state.msg}
    </h1>
    </>)
  }
}


function Content (){

  return (<> 你好世界 </>)
}


export default class App extends Component {

  // 创建一个 ref
  sectionRef = createRef()
  headerRef = createRef()
  contentRef = createRef()

  render() {
    return (
      <div>
        {/* 将 ref 添加在元素上，可以获取到对应的元素 */}
        <section ref={this.sectionRef}>section</section>

        {/* 将 ref 添加在类组件上的时候，可以获取到组件的实例 */}
        <Header ref={this.headerRef}></Header>

        {/* 对于函数式组件而言使用 ref 需要用 forwardRef 的函数包裹 */}
        <Content ref={this.contentRef}></Content>

        <button onClick={()=>{
          // 获取到的是 section 标签
          console.log(this.sectionRef.current);

          // 获取到的是 Header 组件实例
          console.log(this.headerRef.current);
          // 并且可以操作该类组件
          this.headerRef.current.setState({
            msg: '这个真的是头部吗'
          })

          console.log(this.contentRef.current);

        }}>获取 ref 值</button>
      </div>
    )
  }
}
